<!-- 添加思路：按照之前固定的地址和等级添加(按照你的level和location来添加)，所以要先把getLevel和getLocation导包，利用函数获取他们的信息，这时需要两个数组来接收数据，所以定义了两个数组。数组里的数据怎么用？在capation上利用v-for循环 循环两个数组在下拉框中显示即可，不要忘了为下拉框添加:key :value (他俩值一样，都是传的数据) :label (给用户看)  -->
<!--  修改思路：修改的实现在Addmessage下进行，messagelist只完成跳转到该页面即可
    1.先把需要修改的输入框里的内容呈现出来：    
        导包接口“showmessage”，实现单信息展示
        写出方法showmessageList
        （注意此时的赋值语句，赋值的是 res.data[0].属性（messagelist中的属性，需要与uname等对应的属性））
        在created中，接收来自跳转的参数 定义变量idd来接收this.$route.query.id
        同时调用函数showmessagelist 实现页面的内容展示
    2.实现修改：
        导包接口“xiugaimessage”
        写出方法xiugaimessagelist
        （注意此时的赋值语句，赋值的是什么）

    3.按钮的切换，利用v-if语句，定义参数panduan(写在return里),如果修改事件被触发，即created中的if(this.$route.query.id)被执行，将panduan赋值为true即可
    此时就会显示“修改”按钮，
    注意：你的v-if要写在"修改"按钮下，因为默认的按钮是“添加”，所以v-else写在“添加”下，因此，你要把修改按钮写在添加按钮之前
-->
<template>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="添加的用户名称" prop="uname">
          <el-input v-model="ruleForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="添加的地址ID" prop="addressid">
          <el-select v-model="ruleForm.addressid" placeholder="请选择活动区域">
            <el-option
              v-for="t in addressData"
              :key="t.addressid"
              :label="t.addressname"
              :value="t.addressid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加的等级ID" prop="levelid">
          <el-select v-model="ruleForm.levelid" placeholder="请选择活动区域">
            <el-option
              v-for="t in levelData"
              :key="t.jrid"
              :label="t.levelname"
              :value="t.jrid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加的电话号码" prop="tel">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="xiugaiForm('ruleForm')" v-if="panduan"
            >修改</el-button
          >
          <el-button type="primary" @click="submitForm('ruleForm')" v-else
            >立即创建</el-button
          >
          
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { getLocation } from "@/api/location";
  import { addMessage } from "@/api/message";
  import { getLevel } from "@/api/level";
  import { xiugaiMessage } from "@/api/message";
  import { showMessage } from "@/api/message";
  export default {
    data() {
      return {
        ruleForm: {
          uname: "",
          addressid: "",
          levelid: "",
          tel: "",
        },
        rules: {
          uname: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        },
        addressData: [],//定义的数据，写在return里
        levelData: [],
        panduan:''
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addMessage({
              uname: this.ruleForm.uname,
              addressid: this.ruleForm.addressid,
              levelid: this.ruleForm.levelid,
              tel: this.ruleForm.tel,
            })
              .then((res) => {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              })
              .catch((err) => {
                this.$message({
                  message: "添加失败",
                  type: "warning",
                });
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      getLevelList() {
        getLevel().then((res) => {
          this.levelData = res.data;
        });
      },
      getLocationList() {
        getLocation().then((res) => {
          this.addressData = res.data;
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 显示数据，调用接口 点击修改的时候能找到是需要修改的
      showMessageList(idd){//传入参数idd
        showMessage({
          id:idd
        }).then((res)=>{//同getLocation 和 getlevel，需要在then()下写this.ruleForm赋值
          this.ruleForm=res.data[0]
          this.ruleForm={
            uname:res.data[0].jrname,//赋值应该是res.data[0].属性（messagelist里的，与uname等对应的属性），不是this.ruleForm,因为此时传入的参数是idd，并且在这里只需要提取ruleForm的一行，并非全部。所以还要重新给每个变量赋值
            addressid:res.data[0].jraddressesid,
            levelid:res.data[0].jrlevel,
            tel:res.data[0].jrtel
          }
        })
      },


 
      // 修改，调用接口
      xiugaiForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            xiugaiMessage({
              id:this.$route.query.id,
              uname:this.ruleForm.uname,
              addressid:this.ruleForm.addressid,
              levelid:this.ruleForm.levelid,
              tel:this.ruleForm.tel
            }).then((res)=>{
              this.$message({
            message: '修改成功',
            type: 'success'
          });
            }).catch((err)=>{
              this.$message({
            message: '修改失败',
            type: 'warning'
          });
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      
    },
    created() {
      this.getLevelList(), this.getLocationList();
      if(this.$route.query.id){
        this.panduan=true       //切换“修改”按钮和“添加”按钮
        let idd=this.$route.query.id  //定义变量接收由messagelist传来的参数
        this.showMessageList(idd)     //直接调用showMessageList函数，实现需要修改内容的呈现
      }

    
    },
  };
  </script>
  
  <style>
  </style>